<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>农校流水量排序地图</title>
    <link type="text/css" rel="stylesheet" th:href="@{/css/all.css}"/>
    <!--引用百度地图API-->
    <script language='JavaScript' th:src='@{/plugin/jQuery/jQuery-2.2.0.min.js}'></script>
    <script language='JavaScript' th:src="@{/ajax/layer/layer.min.js}"></script>
    <script language='javascript' th:src='@{/js/constant.js}'></script>
    <script language='JavaScript' th:src='@{/plugin/jQuery/jquery.mousewheel.min.js}'></script>
    <script language='JavaScript' th:src='@{/plugin/jquery-easyui-1.5.1/jquery.easyui.min.js}'></script>
    <script language='JavaScript' th:src='@{/plugin/bootstrap/js/bootstrap.min.js}'></script>
    <script language='JavaScript' th:src='@{/plugin/bootstrap-table/bootstrap-table.js}'></script>
    <script language='JavaScript' th:src='@{/plugin/adminLTE/js/app.min.js}'></script>
    <script language='JavaScript' th:src='@{/plugin/lobibox/dist/js/lobibox.js}'></script>
    <script language='JavaScript' th:src='@{/js/network.js}'></script>
    <script language='JavaScript' th:src='@{/js/common.js}'></script>
    <script language='JavaScript' th:src='@{/js/public.js}'></script>
    <script language='JavaScript' th:src='@{/plugin/bootstrap-datetimepicker/js/moment-with-locales.min.js}'></script>
    <script language='JavaScript' th:src='@{/plugin/iCheck/icheck.min.js}'></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=NY8TpPCxLGTkzGdKrRZv9vyxroWKdQmI"></script>
</head>

<style>
	.messages{
	padding-top:10px; 
	}
	.message{
	width:100%;
	height:70px;
	cursor: pointer;
	}
	.li_type{
	margin-top:3px;
	list-style-type:none
	}	
	.font_left{
	color:#FF7F50;
	}
	.color_move{
	background-color: #FFFFCC;
	}
</style>

<body class="body-contrainner fadeInUp">
        
<div style="width:100%;height:100%;border:#ccc solid 1px;font-size:12px;position:absolute;" id="map">

</div>


<div  style="position:absolute; width: 25%;height: 80%;left:1%;top:3%;">
    <form class="bs-example bs-example-form" role="form">
        <div class="row">
            <div class="col-md-12">
                <div class="input-group" >
                    <input type="text" class="form-control" id="sh_name" placeholder="请输入商户名称">
                    <span class="input-group-btn">
                        <button id="btnSearch" class="btn btn-info" type="button"><i class="fa fa-search margin-r-5"></i>搜索</button>
                    </span>
                </div>
            </div>
        </div>
    </form>

 <div id="mainBody"  style="width:100%;height:100%;overflow:auto;font-size: 14px;font-weight:500;background-color:#FFFFFF;margin-top: 4px;">
    </div>
    
</div>


</body>
<script type="text/javascript">

var hr='<hr  class="simple" style="border-top-color:#E6E6FA; margin-bottom: 0px;" />';
var datas;
  ajax.getData(publicData.urls.shop.getShopList, {}, function (data) {
	  datas=data;
	  var html='';
	for(var i=0;i<data.length;i++){
		html+='<div class="messages"><div class="message" ><div  class="col-md-1" style="text-align:center;line-height:70px;"><font style="color:#FF7F50;font-size:24px;">'+(i+1)+'</font></div>';
		html+='<div  class="col-md-10"><ul><li class="li_type"><i class="fa fa-building margin-r-5"></i>&nbsp;<font class="name_right">商户名称:</font>&nbsp;'+data[i].name;
		html+='</li><li class="li_type"><i class="fa fa-tint margin-r-5"></i>&nbsp;<font style="margin-left:4px;">流水总量:</font>&nbsp;<span class="font_left">'+data[i].count_L+'</span>&nbsp;(人次)';
		html+='</li><li class="li_type"><i class="fa fa-jpy margin-r-5"></i>&nbsp;<font style="margin-left:4px;">流水总额:</font>&nbsp;<span class="font_left">'+data[i].count_E+'</span>&nbsp;(元)</li></ul></div></div>';
	    html+=hr+'</div>';
	}
	$("#mainBody").html(html);
	
	var aa=$(".messages")
	for(var i=0;i<aa.length;i++){
 		$(aa[i]).mouseover(function(){
 			$(this).addClass("color_move");
 		})
 		
 		
 		$(aa[i]).mouseout(function(){
 			$(this).removeClass("color_move");
 		}) 
 		$(aa[i]).click(function(){
 			var flag=$(this).find("font").html();
 			//map.centerAndZoom(new BMap.Point(data[flag-1].lng,data[flag-1].lat),19);
 			var opts = {
                width: 200,
                title: "",
                enableMessage: false
            };
            var infoWindow = new BMap.InfoWindow(data[flag-1].count_L,opts);
 			markers_1[flag-1].openInfoWindow(infoWindow);
 			var pointa=Point(data[flag-1].lng,data[flag-1].lat);
 			map.setCenter(pointa);
 		}) 
	}
		    createMap(data[0].lng,data[0].lat);//创建地图
			setMapEvent();//设置地图事件
			addMapControl();//向地图添加控件
			addMapOverlay(data);//向地图添加覆盖物
}); 

		$("#btnSearch").click(function(){
			var sh_name=$("#sh_name").val();
			var html='';
			var count=0;
			var data_search=[];
			for(var i=0;i<datas.length;i++){
				if(datas[i].name.search(sh_name) != -1){
					data_search.push(datas[i]);
					count++;
					html+='<div class="messages"><div class="message" ><div  class="col-md-1" style="text-align:center;line-height:70px;"><font style="color:#FF7F50;font-size:24px;">'+count+'</font></div>';
					html+='<div  class="col-md-10"><ul><li class="li_type"><i class="fa fa-building margin-r-5"></i>&nbsp;<font class="name_right">商户名称:</font>&nbsp;'+datas[i].name;
					html+='</li><li class="li_type"><i class="fa fa-tint margin-r-5"></i>&nbsp;<font style="margin-left:4px;">流水总量:</font>&nbsp;<span class="font_left">'+datas[i].count_L+'</span>&nbsp;(人次)';
					html+='</li><li class="li_type"><i class="fa fa-jpy margin-r-5"></i>&nbsp;<font style="margin-left:4px;">流水总额:</font>&nbsp;<span class="font_left">'+datas[i].count_E+'</span>&nbsp;(元)</li></ul></div></div>';
				    html+=hr+'</div>';
				}
			}

			
			$("#mainBody").html(html);
 			var bb=$(".messages")
			for(var i=0;i<bb.length;i++){
		 		$(bb[i]).mouseover(function(){
		 			$(this).addClass("color_move");
		 		})
		 		
		 		$(bb[i]).mouseout(function(){
		 			$(this).removeClass("color_move");
		 		}) 
		 		
		 		$(bb[i]).click(function(){
		 			var flag=$(this).find("font").html();
		 			//map.centerAndZoom(new BMap.Point(data_search[flag-1].lng,data_search[flag-1].lat),19);

		 			var opts = {
		                width: 200,
		                title: "",
		                enableMessage: false
		            };
		            var infoWindow = new BMap.InfoWindow(data_search[flag-1].count_L,opts);
		 			markers_1[flag-1].openInfoWindow(infoWindow);
		 			var pointa=Point(data_search[flag-1].lng,data_search[flag-1].lat);
		 			map.setCenter(pointa);

		 		}) 
			} 
 			var pointa=Point(data_search[0].lng,data_search[0].lat);
 			map.setCenter(pointa);
		})


    function createMap(lng,lat){
        map = new BMap.Map("map");
        map.centerAndZoom(new BMap.Point(lng,lat),19);
    }
    function setMapEvent(){
        map.enableScrollWheelZoom();
        map.enableKeyboard();
        map.enableDragging();
        map.enableDoubleClickZoom()
    }
    function addClickHandler(target,window){
        target.addEventListener("click",function(){
            target.openInfoWindow(window);
        });
    }
    function addMapOverlay(data){
    	var str='[';
    	for(var i=0;i<data.length;i++){
    		if(i==data.length-1){
        		str+='{"content":"'+data[i].count_L+'","title":"'+data[i].name+'","imageOffset": {"width":-46,"height":-21},"position":{"lat":'+data[i].lat+',"lng":'+data[i].lng+'}}';

    		}else{
        		str+='{"content":"'+data[i].count_L+'","title":"'+data[i].name+'","imageOffset": {"width":-46,"height":-21},"position":{"lat":'+data[i].lat+',"lng":'+data[i].lng+'}},';

    		}
    		
    	}
    	str+=']';
		markers=eval('('+str+')'); 

        for(var index = 0; index < markers.length; index++ ){
            var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);
            var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{
                imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)
            })});
            var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(20,2)});
            label.setStyle({
                color : "black",
                fontSize : "12px",
                height : "20px",
                //lineHeight : "20px",
                fontFamily:"微软雅黑",
                maxWidth:"none"
            });
            var opts = {
                width: 200,
                title: "",
                enableMessage: false
            };
            markers_1.push(marker);
            var infoWindow = new BMap.InfoWindow(markers[index].content,opts);
            //marker.setLabel(label);
            addClickHandler(marker,infoWindow);
            map.addOverlay(marker);
        };

    }
    //向地图添加控件
    function addMapControl(){
        var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
        scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
        map.addControl(scaleControl);
    }
    var map;
    var markers;
    var markers_1=new Array();
</script>
</html>